<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示页面</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <style type="text/css">
        em{
            font-style: normal;
            color: red;
        }
    </style>
</head>
<body>
<div class="layui-row">
    <fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;padding: 15px;">
        <legend>条件搜索</legend>
        <div>
            <form class="layui-form layui-form-pane" lay-filter="searchFormFilter" id="searchForm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">content</label>
                        <div class="layui-input-block">
                            <input type="text" name="content" autocomplete="off" placeholder="请输入搜索关键词"
                                   class="layui-input" lay-verify="required">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-sm" lay-submit="" lay-filter="searchFilter">
                            <i class="layui-icon layui-icon-search"></i>
                            搜索
                        </button>
                    </div>
                </div>

            </form>
        </div>
    </fieldset>
    <!--展示表格-->
    <table class="layui-hide" id="myTable" lay-filter="tableFilter"></table>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs"  lay-event="del">删除</a>
        <a class="layui-btn layui-btn-xs"  lay-event="upd">修改</a>
</script>
</div>
    <!--layui代码-->
    <script>
        layui.use(['form','table','layer'],function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.$;
            //渲染表格
            table.render({
                elem:'#myTable',
                url:'poetries/show',
                height:'500px',
                page:true,
                limit:10,
                limits:[10,20,30],
                cols:[[
                    {field:"id",title:"编号",sort:true,width:80},
                    {field:"title",title:"标题",width:180},
                    {field:"content",title:"内容",width:280},
                    {field:"created_at",title:"录入时间",width:80},
                    {title:"操作",toolbar:'#barDemo'}
                ]]
            })
            //条件搜索  表单提交
            form.on('submit(searchFilter)',function (data) {
                //根据条件重新渲染表格
                table.reload('myTable',{
                    where:{
                        "content":data.field.content
                    }
                })
                return false;
            })
            //删除
            table.on('tool(tableFilter)',function (obj) {
                if(obj.event=='del'){
                    layer.confirm('确认要删除吗？',function (index) {
                        //执行删除方法
                        $.ajax({
                            url: 'portries/remove',
                            data: 'id=' + obj.data.id,
                            success: function (result) {
                                if (result.flag) {
                                    layer.msg('删除成功');
                                    table.reload('myTable');
                                } else {
                                    layer.msg('删除失败');
                                }
                            }
                        })
                        layer.close(index);
                    })
                }else if(obj.event=='upd'){

                }
            })
        })
    </script>
</body>
</html>